<template>
  <a-modal
    :title="$t('补打彩票')"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
    class="customHeight customHeightChild modal_title"
    v-drag
  >
    <template slot="footer">
      <a-button @click="handleCancel" :loading="confirmLoading">{{ $t('取消') }}</a-button>
      <a-button type="primary" v-print="'#print1'">{{ $t('打印') }}</a-button>
    </template>
    <div id="print1" ref="print1" style="width: 58mm; box-sizing: border-box">
      <div style="font-size: 16px; padding: 2px 0 10px; color: #000;text-align: center;;">{{ $t('Waiver Ticket') }}</div>
      <div style="font-size: 16px; padding: 0; color: #000;font-family: '黑体'">
        {{ $t('Date') }}：{{ moment(model.createTime).format('MM/DD/YYYY') }}
      </div>
      <div style="font-size: 16px; padding: 0; color: #000;font-family: '黑体'">
        {{ $t('Time') }}：{{ moment(model.createTime).locale('en').format('h:mm A') }}
      </div>
      <div style="font-size: 16px; padding: 0 0 10px; color: #000;">{{ $t('Station') }}：{{ model.deviceId }}</div>
      <div style="font-size: 16px; padding: 0; color: #000;text-align: center;font-family: '黑体'">{{ $t('Show This Ticket') }}</div>
      <div style="font-size: 16px; padding: 0; color: #000;text-align: center;font-family: '黑体'">{{ $t('To The Cashier To') }}</div>
      <div style="font-size: 16px; padding: 0; color: #000;text-align: center;font-family: '黑体'">{{ $t('Reference Your Waivers.') }}</div>
      <div style="font-size: 16px; padding: 4px 0; color: #000"></div>
      <!-- <div style="text-align: center;">
        <svg ref="barcode"></svg>
      </div>
      <div style="font-size: 14px; height: 10px"></div> -->
      <div id="qrcode" ref="qrcode" style="width: 120px; height: 120px; overflow: hidden;margin: 10px auto 4px;"></div>
      <div style="font-size: 15px; text-align: center; padding: 2px 0 10px; color: #000">
        {{ model.id }}
      </div>
    </div>
  </a-modal>
</template>
<script>
/* import JsBarcode from 'jsbarcode'; */
import QRCode from 'qrcodejs2'
import moment from 'moment'

export default {
  name: 'FillModal',
  data() {
    return {
      moment,
      width: 500,
      visible: false,
      confirmLoading: false,
      model: {}
    }
  },
  methods: {
    show(record) {
      let that = this
      that.visible = true
      that.model = Object.assign({}, record)
      /* that.$nextTick(() => {
        that.$refs.barcode.innerHTML = ''
        JsBarcode(that.$refs.barcode, record.id, {
          format: 'CODE128', // 条形码类型
          lineColor: '#000', // 线条颜色
          width: 1.2, // 线条宽度
          height: 44,       // 条形码高度
          displayValue: true, // 显示文本
        });
      }) */
      that.$nextTick(()=>{
        that.$refs.qrcode.innerHTML = ''
        var qrcode = new QRCode('qrcode', {
          width: 120, //二维码的宽度
          height: 120, //二维码的高度
          text: record.id, //调用weixincode()方法时后台传的code
          colorDark: '#000', //二维码颜色
          colorLight: '#fff', //二维码底色
          correctLevel: QRCode.CorrectLevel.L, //容错率，L/M/H
        })
      })
    },
    handleCancel() {
      this.visible = false
    },
  },
}
</script>